<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与决定定位</title>
		<style>
			/* 相对定位：box2图片压到box1图片上 */
			div.box1{
				width: 250px;
				height: 250px;
				background: url(img/4.png);
				background-size: 100%;
				/* 申明一个相对定位与方向属性 */
				position: absolute;
				top:0px;
				left: 0px;
				/* 堆叠  z-index  针对所有的postion定位 */
				z-index: 100;
			}
			div.box2{
				width: 250px;
				height: 250px;
				background: url(img/2.png);
				background-size: 100%;
				/* 申明一个相对定位 */
				position: absolute;
				top:0px;
				left: 0px;
				z-index: 101;	 
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位  相对定位与父元素定位
		           功能：单一元素定位，元素在正常文档流中，推荐
				position属性: relative;声明元素可以用相对定位意义
				    方向属性：Left、 right 、top、 bottom
					堆叠顺序熟悉：z-index
					            属性值数值：数值越大，越靠前								
		 -->
		 <!-- 绝对定位 按照定位祖先【页面左上角】进行定位 
		       功能：脱离文档流，不占据原空间
			   方向属性和叠加属性和相对以及固定定位固定！
			   position属性：ablosute;声明文员可以使用绝对定位
		    实际开发中 ：相对定位结合决定定位一起使用
		                侧边栏，左栏，遮罩层【挂靠】
				案例：左栏弹出【html结构，语义化标签+css两种定位+js】		
		  -->
		 <div class="box1"></div>
		 <div class="box2"></div>
		 
	</body>
</html>